<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <span id="span1">这是一个文本标签1</span>
    <span id="span2">这是一个文本标签2</span>
    <span name="s1">这是一个文本标签3</span>
        <script>
            // document
            // window.document
            // console.log(document.nodeType);
            // console.log(document.nodeValue);
            // console.log(document.nodeName);
            // console.log(document);
            /*
                获取元素
                    getElementById：通过id属性获取单个元素
                    getElementsByName()：通过name属性获取一个元素数组
             */
            let span1 = document.getElementById("span1");
            console.log(span1);
            span1.innerText = "这是通过JavaScript修改的内容";
            // document.getElementsByName()

            let spans = document.getElementsByTagName("span");//获取页面上所有span标签
            //得到的是一个HTMLCollectionOf的类似于Array的集合对象。HTMLCollectionOf是一个动态的集合
            //Array.from(spans)：可以将一个类似数组的数据转换为数组
            // Array.from(spans).forEach(function (value) {
            //     console.log(value);
            // });
            //namedItem：在集合中查找一个name属性的值为s1的元素
            console.log(spans.namedItem("s1"));
            console.log(spans[0] === spans.item(0));
            /*
                i   spans.length
                0   3
                1.txt   2
             */
            // for (let i = 0; i < spans.length; i++) {
            //     console.log(spans[i]);
            //     spans[i].remove();//删除自己
            // }
            //对于删除HTMLCollectionOf和NodeListOf的集合，都应该使用如下代码，不能使用for循环
            // while (spans.length > 0) {
            //     spans[spans.length - 1.txt].remove();
            // }

            /*
                支持选择器获取元素，支持CSS选择器
                    querySelector：只能查找到一个
                    querySelectorAll：查找所有
             */
            console.log(document.querySelector("span"));//获取第一个匹配的span标签
            console.log(document.querySelector("#span2"));//获取第一个匹配的span标签
            console.log(document.querySelector("span[name='s1']"));//获取第一个匹配的span标签
            console.log(document.querySelectorAll("span"));//获取所有span标签
        </script>
    </body>
</html>